<#import "/spring.ftl" as spring />
<!doctype html>
<!--[if lt IE 7]>
<html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>
<html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>
<html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js"> <!--<![endif]-->
<head>
    <base href="<@spring.url basePath/>">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Eureka</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">

    <link rel="stylesheet" href="eureka/css/wro.css">

</head>

<body id="one">
<#include "header.ftl">
<div class="container-fluid xd-container">
    <div class="row">
        <div class="col-md-8">
            <div class="row" id="output"
                 style="background-color: black;color: white;overflow-y:scroll;min-height: 200px;font-size: 60%">
            </div>
        </div>
        <div class="col-md-4">
            <h1>Action</h1>
            <table id='command' class="table table-condensed table-striped table-hover">
                <#list commands as command>
                    <tr>
                        <td>${command}</td>
                        <td>
                            <button type="button" data-target="#bs-example-navbar-collapse-1"
                                    onclick="execute('${projectName!}','${command!}')">restart
                            </button>
                            <button type="button" data-target="#bs-example-navbar-collapse-1"
                                    onclick="alert('暂未实现')">stop
                            </button>
                        </td>
                    </tr>
                </#list>
            </table>

            <h1 style="margin-top:20px;">System Status</h1>
            <table id='systemStatus' class="table table-condensed table-striped table-hover">
                <tr>
                    <td>Project Name</td>
                    <td>${projectName!}</td>
                </tr>
                <tr>
                    <td>Version</td>
                    <td>${version!}</td>
                </tr>
                <tr>
                    <td>State</td>
                    <td>
                        <img class="state" id="state1" style="width:60px;height:20px;"
                             src="eureka/images/running.png"/>
                        <img class="state" id="state2" style="width:20px;height:20px;"
                             src="eureka/images/run-success.png"/>
                        <img class="state" id="state3" style="width:20px;height:20px;"
                             src="eureka/images/run-fail.png"/>
                    </td>
                </tr>
            </table>

            <h1 style="margin-top:20px;">Project List</h1>
            <table id='instances' class="table table-condensed table-striped table-hover">
                <#if instanceInfos?has_content>
                    <#list instanceInfos as instanceInfo>
                        <tr>
                            <td>${instanceInfo.instanceId}</td>
                            <td>
                                <#if instanceInfo.version = version>
                                    ${instanceInfo.status}
                                <#else>
                                    <font color=red size=+1><b>${instanceInfo.status}</b></font>
                                </#if>
                            </td>
                        </tr>
                    </#list>
                </#if>
            </table>
        </div>
    </div>

</div>
<script type="text/javascript" src="eureka/js/wro.js"></script>
<script type="text/javascript" src="eureka/js/jquery.timers.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('table.stripeable tr:odd').addClass('odd');
        $('table.stripeable tr:even').addClass('even');

        $('#output').height($(window).height() - 80 - 140);
        setState();
    });

    function execute(name, command) {
        setState(1);
        $.ajax({
            url: "action/execute?name=" + name + "&commandKey=" + command,
            // async: false,
            success: function (req) {
                $('#output').stopTime();
                $('#output').html('');
                $('#output').everyTime('200ms', 'A', function () {
                    executeLog(name, command);
                }, 300, true);// 1min = 200 * 5 * 60;
            }
        });
    }

    function executeLog(name, command) {
        $.ajax({
            url: "action/execute/log?name=" + name + "&commandKey=" + command,
            async: false,
            success: function (req) {
                var log = req.log;
                if (log.endsWith("end is success<br/>")) {
                    $('#output').stopTime();
                    setState('2');
                } else if (log.endsWith("end is error<br/>")) {
                    $('#output').stopTime();
                    setState('3');
                }
                $('#output').append(log);
                $('#output').scrollTop($('#output')[0].scrollHeight);

                var instanceInfos = req.instanceInfos;
                $('#instances').html('');
                for (i = 0; i < instanceInfos.length; i++) {
                    $('#instances').append("<tr><td>" + instanceInfos[i].instanceId + "</td><td>" + instanceInfos[i].status + "</td></tr>");
                }
            }
        });
    }

    function setState(flag) {
        $('img.state').hide();
        if (flag) {
            $('#state' + flag).show();
        }
    }
</script>
</body>
</html>
